<template>
  <div class="app-container">
    <div class="custom_card_0">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100"
        size="small"
      >
        <el-form-item label="车型名称" prop="carModelName">
          <el-input
            v-model="queryParams.carModelName"
            placeholder="请输入车型名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="所属门店" prop="storeId">
          <el-select
            v-model="queryParams.storeId"
            filterable
            placeholder="请选择门店"
          >
            <el-option
              v-for="(item, index) in storeList"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="custom_card">
      <el-row class="mb8" :gutter="10">
        <el-col :span="3">
          <el-button class="first-plain-btn" size="medium" @click="add"
          >手动调价</el-button
          >
        </el-col>
      </el-row>
      <el-tabs v-model="queryParams.priceType" @tab-click="changeTabs">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="item.value"
          :label="item.label"
          :name="item.value"
        >
          <el-table
            v-loading="loading"
            :data="basicList"
            stripe
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            border
          >
            <el-table-column
              key="carModelName"
              align="center"
              prop="carModelName"
              label="车型名称"
              min-width="180"
            >
            </el-table-column>
            <template v-if="queryParams.priceType > 1">
              <el-table-column
                key="remark"
                align="center"
                prop="remark"
                :label="`${
                  queryParams.priceType == 2 ? '节假日名称' : '特殊日名称'
                }`"
                min-width="140"
              >
                <template v-slot="{ row }">
                  {{ row.remark }}
                </template>
              </el-table-column>
              <el-table-column
                key="vaildTime"
                align="center"
                prop="vaildTime"
                label="生效时间"
                min-width="180"
              >
                <template v-slot="{ row }">
                  {{ row.startTime }}至{{ row.endTime }}
                </template>
              </el-table-column>
            </template>

            <template v-if="sysPlatforms.length > 0">
              <el-table-column
                v-if="sysPlatforms.includes('xc')"
                key="xc"
                align="center"
                prop="xc"
                label="携程"
                min-width="140"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.xcWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.xcWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.xcWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.xcWeekendPrice || "--" }}</span>
                    </template>
                    <!--                    <span>车辆押金:{{ row.xcCarDeposit || '&#45;&#45;' }}</span>
                    <span>违章押金:{{ row.xcViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('hl')"
                key="hl"
                align="center"
                prop="hl"
                label="哈啰"
                min-width="140"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.hlWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.hlWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.hlWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.hlWeekendPrice || "--" }}</span>
                    </template>
                    <!--                    <span>车辆押金:{{ row.hlCarDeposit || '&#45;&#45;' }}</span>
                    <span>违章押金:{{ row.hlViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('wk')"
                key="wk"
                align="center"
                prop="wk"
                label="悟空"
                min-width="140"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.wkWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.wkWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.wkWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.wkWeekendPrice || "--" }}</span>
                    </template>
                    <!--                    <span>车辆押金:{{ row.wkCarDeposit || '&#45;&#45;' }}</span>
                    <span>违章押金:{{ row.wkViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('zzc')"
                key="zzc"
                align="center"
                prop="zzc"
                label="租租车"
                min-width="140"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.zzcWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.zzcWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.zzcWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.zzcWeekendPrice || "--" }}</span>
                    </template>
                    <!--                    <span>车辆押金:{{ row.zzcCarDeposit || '&#45;&#45;' }}</span>
                    <span>违章押金:{{ row.zzcViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('at')"
                key="at"
                align="center"
                prop="at"
                label="凹凸"
                min-width="140"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.atWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.atWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.atWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.atWeekendPrice || "--" }}</span>
                    </template>
                    <!--                    <span>车辆押金:{{ row.atCarDeposit || '&#45;&#45;' }}</span>
                    <span>违章押金:{{ row.atViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
              <el-table-column
                v-if="sysPlatforms.includes('fz')"
                key="fz"
                align="center"
                prop="fz"
                label="飞猪"
                min-width="140"
              >
                <template v-slot="{ row }">
                  <div class="flex-column-center" v-if="row.fzWeekdayPrice">
                    <template v-if="row.priceType > 1">
                      <span>日租金:{{ row.fzWeekdayPrice || "--" }}</span>
                    </template>
                    <template v-else>
                      <span>周内:{{ row.fzWeekdayPrice || "--" }}</span>
                      <span>周末:{{ row.fzWeekendPrice || "--" }}</span>
                    </template>
                    <!--                    <span>车辆押金:{{ row.fzCarDeposit || '&#45;&#45;' }}</span>
                    <span>违章押金:{{ row.fzViolationDeposit || '&#45;&#45;' }}</span>-->
                  </div>
                  <div class="flex-column-center" v-else>--</div>
                </template>
              </el-table-column>
            </template>
            <el-table-column
              key="storeName"
              align="center"
              prop="storeName"
              label="所属门店"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              key="sysPlatform"
              align="center"
              prop="sysPlatform"
              label="匹配平台"
              min-width="140"
            >
            </el-table-column>
            <el-table-column
              key="createTime"
              align="center"
              prop="createTime"
              label="最近价格同步时间"
              min-width="160"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="100"
              fixed="left"
            >
              <template v-slot="{ row }">
                <el-button size="small" type="text" @click="goDetail(row)"
                >查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import * as priceUpdate from "@/api/ota/priceUpdate";

export default {
  dicts: ["ota_order_resource"],
  data() {
    return {
      tabList: [
        {
          label: "平日价格配置",
          value: "1",
        },
        {
          label: "节假日价格配置",
          value: "2",
        },
        {
          label: "特殊日价格配置",
          value: "3",
        },
      ],
      storeList: [],
      loading: false,
      basicList: [],
      queryParams: {
        carModelName: null,
        storeId: null,
        priceType: "1",
      },
    };
  },
  computed: {
    sysPlatforms() {
      const systemPlates = this.dict.type.ota_order_resource.map((item) => {
        return item.value;
      });
      console.log("systemPlates", systemPlates);
      return systemPlates || [];
    },
  },
  created() {
    this.getStoreList();
    this.getList();
  },
  methods: {
    changeTabs(tab, event) {
      this.getList();
    },
    getList() {
      this.loading = true;
      priceUpdate
        .workList(this.queryParams)
        .then((res) => {
          this.basicList = res.data;
        })
        .finally((f) => {
          this.loading = false;
        });
    },
    //新增手动调价
    add() {
      this.$router.push({
        name: "OtaPriceUpdateAdd",
      });
    },
    // 查看
    // goDetail(row) {
    //    this.$router.push({
    //      name:'OtaPriceUpdateDetail',
    //      query:{
    //        carModelId:row.carModelId,
    //        carModelName:row.carModelName
    //      }
    //    })
    // },
    goDetail(row) {
      this.$router.push({
        path:"/ota/workOrder",
        query:{
          carModelName:row.carModelName
        }
      })
    },
    handleQuery() {
      this.getList();
    },

    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.handleQuery();
    },
    //获取门店列表
    getStoreList() {
      priceUpdate.storeList().then((res) => {
        this.storeList = res.data || [];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
